// html,
// body, * {
//   // color: #333333 !important;
//   color: #333333 ;
// }

:root:root {
  --van-radio-checked-icon-color: #45b5c3;
  --van-radio-border-color: #45b5c3;
  --van-button-primary-background:#45b5c3;
  --van-button-primary-border-color: #45b5c3;
}

.background_unset {
  background: none;
}
.van-form-result {
  .van-field {
    .van-field__label {
      color: #666666 !important;
    }
  }
}
.unit {
  .van-field__label {
    #van-field-3-label,
    #van-field-4-label,
    #van-field-6-label,
    #van-field-7-label {
      position: relative;
    }
    #van-field-3-label::after,
    #van-field-4-label::after,
    #van-field-6-label::after,
    #van-field-7-label::after {
      display: block;
      position: absolute;
      bottom: -6px;
      left: 30px;
      font-size: 10px;
      color: #999999;
    }
  }
}
.unit.unit_height {
  .van-field__label {
    #van-field-3-label::after {
      content: '(CM)';
    }
  }
}
.unit.unit_weight {
  .van-field__label {
    #van-field-4-label::after {
      content: '(KG)';
    }
  }
}
.unit.unit_sbp {
  .van-field__label {
    #van-field-6-label::after {
      content: '(mmHg)';
      left: 44px;
    }
  }
}

.unit.unit_dbp {
  .van-field__label {
    #van-field-7-label::after {
      content: '(mmHg)';
      left: 44px;
    }
  }
}

.radio-button {
  padding: 8px 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  .van-radio {
    padding: 0;
    margin: 0;
  }
  .van-radio__icon {
    display: none;
  }
  .van-radio__label {
    background: #e8e8e8;
    color: #999999;
    border-radius: 20px;
    font-size: 12px;
    padding: 2px 4px;
  }
  .van-radio__icon--checked + .van-radio__label {
    background: linear-gradient(to right, #45b5c3, #55d0ca);
    color: #ffffff;
  }
}

.radio-slider {
  padding: 8px 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  .van-radio {
    display: block;
    position: relative;
    padding: 0;
    margin: 0;
    flex: 1;
    text-align: center;
    padding-bottom: 10px;
  }
  .van-radio__icon {
    display: none;
  }
  .van-radio__label {
    position: relative;
    background: rgba($color: #45b5c3, $alpha: 0.1);
    color: #45b5c3;
    border-radius: 20px;
    font-size: 14px;
    padding: 2px 10px;
    margin: unset;
  }

  .van-radio::before,
  .van-radio::after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0px;
    width: calc(50% - 4px);
    height: 4px;
    background-color: #eeeeee;
  }
  .van-radio::before {
    left: 2px;
  }
  .van-radio::after {
    right: 2px;
  }

  // .van-radio[aria-checked='true']{
  //   &::before, &::after {
  //     background-color: #45B5C3;
  //   }
  // }
}
.radio-slider[data='1'] {
  .van-radio__icon--checked + .van-radio__label {
    background: #45b5c3;
    color: #ffffff;
  }

  .van-radio__label {
    background: rgba($color: #45b5c3, $alpha: 0.1);
    color: #45b5c3;
  }
  .van-radio {
    &::before,
    &::after {
      background-color: #45b5c3;
    }
  }
  .van-radio:nth-child(1) ~ .van-radio {
    &::before,
    &::after {
      background-color: #eeeeee;
    }
  }
}
.radio-slider[data='2'] {
  .van-radio__icon--checked + .van-radio__label {
    background: #7b8cfa;
    color: #ffffff;
  }

  .van-radio__label {
    background: rgba($color: #7b8cfa, $alpha: 0.1);
    color: #7b8cfa;
  }
  .van-radio {
    &::before,
    &::after {
      background-color: #7b8cfa;
    }
  }
  .van-radio:nth-child(2) ~ .van-radio {
    &::before,
    &::after {
      background-color: #eeeeee;
    }
  }
}
.radio-slider[data='3'] {
  .van-radio__icon--checked + .van-radio__label {
    background: #ff4949;
    color: #ffffff;
  }
  .van-radio__label {
    background: rgba($color: #ff4949, $alpha: 0.1);
    color: #ff4949;
  }
  .van-radio {
    &::before,
    &::after {
      background-color: #ff4949;
    }
  }
  .van-radio:nth-child(3) ~ .van-radio {
    &::before,
    &::after {
      background-color: #eeeeee;
    }
  }
}

